<template>
  <div>
    <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
      <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card
          title="训练质量"
          style="margin-bottom: 24px"
          :loading="radarLoading"
          :bordered="false"
          :body-style="{ padding: 0 }"
          :style="{ height: '100%' }">
          <div>
            <radar :data="radarData"/>
          </div>
        </a-card>
      </a-col>
      <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card
          title="稳定性"
          style="margin-bottom: 24px"
          :loading="radarLoading"
          :bordered="false"
          :body-style="{ padding: 0 }"
          :style="{ height: '100%' }">
          <div>
            <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
              <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
                <chart-card :loading="loading" title="角度" total="78%">
                  <a-tooltip title="角度稳定性" slot="action">
                    <a-icon type="info-circle-o" />
                  </a-tooltip>
                  <div>
                    <mini-progress color="rgb(0,191,255)" :target="80" :percentage="78" height="8px" />
                  </div>
                  <template slot="footer">
                    <trend flag="down" style="margin-right: 16px">
                      <span slot="term">稳定性</span>
                      12%
                    </trend>
                  </template>
                </chart-card>
              </a-col>
              <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
                <chart-card :loading="loading" title="角速度" total="95%">
                  <a-tooltip title="角速度稳定性" slot="action">
                    <a-icon type="info-circle-o" />
                  </a-tooltip>
                  <div>
                    <mini-progress color="rgb(0,191,255)" :target="80" :percentage="95" height="8px" />
                  </div>
                  <template slot="footer">
                    <trend flag="up" style="margin-right: 16px">
                      <span slot="term">稳定性</span>
                      2%
                    </trend>
                  </template>
                </chart-card>
              </a-col>
            </a-row>
            <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
              <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
                <chart-card :loading="loading" title="速度" total="80%">
                  <a-tooltip title="速度稳定性" slot="action">
                    <a-icon type="info-circle-o" />
                  </a-tooltip>
                  <div>
                    <mini-progress color="rgb(0,191,255)" :target="80" :percentage="80" height="8px" />
                  </div>
                  <template slot="footer">
                    <trend flag="down" style="margin-right: 16px">
                      <span slot="term">稳定性</span>
                      1%
                    </trend>
                  </template>
                </chart-card>
              </a-col>
              <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
                <chart-card :loading="loading" title="距离" total="85%">
                  <a-tooltip title="距离稳定性" slot="action">
                    <a-icon type="info-circle-o" />
                  </a-tooltip>
                  <div>
                    <mini-progress color="rgb(0,191,255)" :target="80" :percentage="85" height="8px" />
                  </div>
                  <template slot="footer">
                    <trend flag="up" style="margin-right: 16px">
                      <span slot="term">稳定性</span>
                      1%
                    </trend>
                  </template>
                </chart-card>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col >
    </a-row>

    <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
      <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24" >
          <a-card
            title="速度"
            style="margin-bottom: 24px"
            :bordered="false"
            :body-style="{ padding: 0 }"
            :style="{ height: '100%' }">

            <ve-line :data="angleData" :data-zoom="Data_zoom"></ve-line>
          </a-card>
      </a-col>
      <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24" >
          <a-card
            title="角速度"
            style="margin-bottom: 24px"
            :bordered="false"
            :body-style="{ padding: 0 ,width:'100%'}"
            :style="{ height: '100%',width:'100%' }">
            <ve-line :data="angleSpeedData" :data-zoom="Data_zoom"></ve-line>
          </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
      <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24" >
          <a-card
            title="划桨速度"
            style="margin-bottom: 24px"
            :bordered="false"
            :body-style="{ padding: 0 ,width:'100%'}"
            :style="{ height: '100%',width:'100%' }">
            <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
              <ve-line :data="paddleSpeedData" :data-zoom="Data_zoom"></ve-line>
            </a-col>
            <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
              <ve-histogram :data="paddleRateData"  :extend="paddleRateExtend" ></ve-histogram>
            </a-col>
          </a-card>
      </a-col>
      <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24" >
        <a-card
          title="移动距离"
          style="margin-bottom: 24px"
          :bordered="false"
          :body-style="{ padding: 0 ,width:'100%'}"
          :style="{ height: '100%',width:'100%' }">
            <ve-line :data="moveDistance" :data-zoom="Data_zoom"></ve-line>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import { Radar } from '@/components'
  import {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea,
  } from '@/components'
  import { baseMixin } from '@/store/app-mixin'
  const DataSet = require('@antv/data-set')
  export default {
    name: 'Analysis',
    mixins: [baseMixin],
    components: {
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      NumberInfo,
      MiniSmoothArea,
      Radar,
    },
    data() {
      return {
        title:"dadas",
        loading: true,
        radarLoading: true,
        radarData: [],
        Data_zoom:{
          type: 'slider',
          start: 0,
          end: 100
        },
        angleSpeedData:{
          columns: ['时间', '躯干', '肘部', '膝部'],
          rows: [
            { '时间': '1/1', '躯干': 0.3, '肘部': 0.4, '膝部': 0.6},
            { '时间': '1/2', '躯干': 0.34, '肘部': 0.34, '膝部': 0.55},
            { '时间': '1/3', '躯干': 0.43, '肘部': 0.41, '膝部': 0.54},
            { '时间': '1/4', '躯干': 0.33, '肘部': 0.42, '膝部': 0.34},
            { '时间': '1/5', '躯干': 0.36, '肘部': 0.24, '膝部': 0.48},
            { '时间': '1/6', '躯干': 0.37, '肘部': 0.44, '膝部': 0.56},
            { '时间': '1/7', '躯干': 0.38, '肘部': 0.14, '膝部': 0.57},
          ]
        },
        angleData:{
          columns: ['时间', '躯干', '肘部', '膝部','臀部','踝部'],
          rows: [
            { '时间': '1/1', '躯干': 120, '肘部': 109, '膝部': 56,'臀部':89,'踝部':123 },
            { '时间': '1/2', '躯干': 40, '肘部': 89, '膝部': 35,'臀部':12,'踝部':32 },
            { '时间': '1/3', '躯干': 23, '肘部': 43, '膝部': 34,'臀部':87,'踝部':111 },
            { '时间': '1/4', '躯干': 40, '肘部': 23, '膝部': 89,'臀部':109,'踝部':121 },
            { '时间': '1/5', '躯干': 66, '肘部': 123, '膝部': 123,'臀部':132,'踝部':143 },
            { '时间': '1/6', '躯干': 102, '肘部': 43, '膝部': 132,'臀部':123,'踝部':56 },
            { '时间': '1/7', '躯干': 101, '肘部': 25, '膝部': 89,'臀部':102,'踝部':34 },
          ]
        },
        paddleSpeedData:{
          columns:['时间','拉浆速度','回浆速度'],
          rows:[
            { '时间': '1/1', '拉浆速度': 0.8, '回浆速度': 0.7},
            { '时间': '1/2', '拉浆速度': 1.2, '回浆速度': 0.9},
            { '时间': '1/3', '拉浆速度': 1.3, '回浆速度': 1.0},
            { '时间': '1/4', '拉浆速度': 1.23, '回浆速度': 0.6},
            { '时间': '1/5', '拉浆速度': 0.68, '回浆速度': 0.5},
            { '时间': '1/6', '拉浆速度': 0.83, '回浆速度': 0.6},
            { '时间': '1/7', '拉浆速度': 0.88, '回浆速度': 0.76},
          ]
        },
        paddleRateExtend:{
          //title: {text:"划桨频率", left: "center" },
          legend: {
            show: true,
            bottom: "bottom"
          },
          color: ["#4ad2ff"],
        },
        paddleRateData:{
          columns:['时间','浆频'],
          rows:[
            { '时间': '1/1', '浆频': 234},
            { '时间': '1/2', '浆频': 256},
            { '时间': '1/3', '浆频': 255},
            { '时间': '1/4', '浆频': 206},
            { '时间': '1/5', '浆频': 234},
            { '时间': '1/6', '浆频': 212},
            { '时间': '1/7', '浆频': 200},
          ]
        },
        moveDistance:{
          columns:['时间','滑座移动距离','手柄移动距离'],
          rows:[
            { '时间': '1/1', '滑座移动距离': 80, '手柄移动距离': 70},
            { '时间': '1/2', '滑座移动距离': 78, '手柄移动距离': 65},
            { '时间': '1/3', '滑座移动距离': 56, '手柄移动距离': 72},
            { '时间': '1/4', '滑座移动距离': 65, '手柄移动距离': 75},
            { '时间': '1/5', '滑座移动距离': 76, '手柄移动距离': 65},
            { '时间': '1/6', '滑座移动距离': 46, '手柄移动距离': 45},
            { '时间': '1/7', '滑座移动距离': 56, '手柄移动距离': 66},
          ]
        }
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
    },
    mounted () {
      this.initRadar()
    },

    methods: {
      initRadar () {
        this.radarLoading = true
        //这边被mock接口拦截了
        this.$http.get('/workplace/radar')
          .then(res => {
            console.log(res)
            const dv = new DataSet.View().source(res.result)
            console.log(dv)
            dv.transform({
              type: 'fold',
              fields: ['平均值', '最大值', '最小值'],
              key: 'user',
              value: 'score'
            })

            this.radarData = dv.rows
            this.radarLoading = false
          })
      }
    },

  }
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0, 0, 0, 0.45);
      cursor: pointer;
      transition: color 0.32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
